{% extends "base.html" %}
{% block title %}configmap{% endblock %}
{% block storage %}layui-nav-itemed{% endblock %}
{% block storage_configmap %}layui-this{% endblock %}
{% block body %}
   <span class="layui-breadcrumb span-float" lay-separator="/" >
      <a href="/">首页</a>
      <a href='{% url "storage:pvc" %}'>存储与配置</a>
      <a><cite>ConfigMap</cite></a>
   </span>
    <div class="demoTable" style="margin-top: 10px; margin-left: 10px;">
        <a class="layui-btn" style="color: white" href="{% url 'storage:configmap_create' %}">创建</a>
        搜索名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="LAY_table" lay-filter="k8s"></table>
{% endblock %}
    {% block js %}

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">YAML</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script>
            layui.use('table', function () {
                var table = layui.table;

                //方法级渲染
                table.render({
                    elem: '#LAY_table'
                    , url: '{% url "configmap_api" %}?namespace=' + namespace
                    , cols: [[
                        {checkbox: true, fixed: true}
                        , {field: 'name', title: '名称', sort: true}
                        , {field: 'namespace', title: 'NAMESPACE'}
                        , {field: 'config_num', title: '配置文件数'}
                        , {field: 'create_time', title: '创建时间', sort: true}
                        , {fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
                    ]]
                    , id: 'testReload'
                    , page: true
                });

                var $ = layui.$, active = {
                    reload: function () {
                        var demoReload = $('#demoReload');
                        //执行重载
                        table.reload('testReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: {
                               search_key: demoReload.val()
                            }
                        });
                    }
                };

                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //触发单元格工具事件 删除和查看
                table.on('tool(k8s)', function (obj) { // 双击 toolDouble
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('真的删除' + data.name + "吗？", function (index) {
                            const csrf_token = $('[name = "csrfmiddlewaretoken"]').val();
                            $.ajax({
                                url: "{% url 'configmap_api' %}?namespace=" + namespace,
                                type: "delete",
                                data: data,
                                headers: {"X-CSRFToken": csrf_token}, // 需要将csrf 提交到token 中，delete方法需要加到header中，不能提交到data中
                                success: function (res) {
                                    if (res.code === 0) {
                                        obj.del();
                                        layer.msg(res.msg, {icon: 6});
                                    } else {
                                        {#layer.msg(res.msg, {icon: 5});#}
                                        layer.msg('<strong>error code: </strong>'+ res.code + ', <strong>error message: </strong>' + res.msg, {icon:5})
                                    }
                                }, error: function () {
                                    layer.msg('服务接口异常', {icon: 5});
                                }
                            })
                        });
                    } else if (obj.event === 'edit') {
                        layer.open({
                          title: 'YAML查看',
                          type: 2,
                          area: ['80%', '80%'],
                          content: '{% url "ace_edit" %}?resource=config_map' + '&namespace=' + data["namespace"] + '&name=' + data["name"]
                        });
                    }
                });

            });

        </script>
    {% endblock %}
